<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="author" content="Dmitri Voronianski">
	<title>jQuery plugin for Avgrund concept popin</title>
	<link href='http://fonts.googleapis.com/css?family=Headland+One|Open+Sans:400,300&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="http://labs.voronianski.com/media/style/reset.css">
	<link rel="stylesheet" href="./style/style.css">
	<link rel="stylesheet" href="./style/avgrund.css">

	<!--[if lt IE 9]>
		<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
	<div class="container">

		<div class="buttons">
			<a href="#" id="show" class="button left">Show it</a>
			<a href="http://labs.voronianski.com/jquery.avgrund.js_v1_0.zip" class="button download left">Download source</a>
		</div>

		<p class="clear">You can simply init Avgrund with one line:</p>
		<pre>$('element').avgrund();</pre>

		<pre>$('element').avgrund({			
	width: 380, // max is 640px
	height: 280, // max is 350px
	showClose: false, // switch to 'true' for enabling close button 
	showCloseText: '', // type your text for close button
	holderClass: '', // lets you name custom class for popin holder..
	overlayClass: '', // ..and overlay block
	enableStackAnimation: false, // another animation type
	onBlurContainer: '', // enables blur filter for specified block 
	template: 'Your content goes here..'
});</pre>

		<div class="socials">
			<div class="right">
				<span>&copy;2012</span>
				<a href="http://twitter.com/voronianski/" target="blank">@voronianski</a> /
				<a href="http://pixelhunter.me/" target="blank">pixelhunter.me</a> 
			</div>
		</div>
	</div>

	<a href="https://github.com/voronianski/jquery.avgrund.js" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="../../js/jquery.avgrund.js"></script>
	<script>
	$(function() {
		$('#show').avgrund({
			height: 200,
			holderClass: 'custom',
			showClose: true,
			showCloseText: 'Close',
			enableStackAnimation: true,
			onBlurContainer: '.container',
			template: '<p>So implement your design and place content here! If you want to close modal, please hit "Esc", click somewhere on the screen or use special button.</p>' +
			'<div>' +
			'<a href="http://github.com/voronianski/jquery.avgrund.js" target="_blank" class="github">Avgrund on Github</a>' +
			'<a href="http://twitter.com/voronianski" target="_blank" class="twitter">Twitter</a>' +
			'<a href="http://dribbble.com/voronianski" target="_blank" class="dribble">Dribbble</a>' +				
			'</div>'
		});
	});
	</script>
</body>
</html>